import React,{useEffect,useState} from 'react'
import axios from 'axios'
import './index.css'
import { Button, message, } from 'antd';
import {useNavigate} from 'react-router-dom'

export default function ALL() {
  const navigate=useNavigate()
  let [list,setList]=useState([])
  let [tjk,setTjk]=useState([])
 
  useEffect(()=>{
    axios.get('/api/sp').then((resp)=>{
        setList(resp.data.sp)
    })
  },[])
  
  const tj=(ind)=>{
    message.success("提交成功")
    tjk.push(list[ind])
    localStorage.setItem("list",JSON.stringify(tjk))
  }
  
  const wtj=()=>{
    message.error("提交失败")
  }
  const pl=(ind)=>{
    navigate('/pl')
    console.log(localStorage.getItem('pl'))
    if ([...document.querySelectorAll('.ant-tabs-tabpane div div')][ind].querySelector('dl dd span')!==null) {
      list[ind].pl.push(localStorage.getItem('pl') ? [...document.querySelectorAll('.ant-tabs-tabpane div div')][ind].querySelector('dl dd span').innerHTML=localStorage.getItem('pl'):"没有评论")
    }
  }
 
  return (
    <div>
      {list.length>0 && list.map((item,ind)=>(<div key={ind}>
        <dl>
            <dt><img src={item.img}/></dt>
            <dd>{item.title}</dd>
            <dd>{item.price}(元)</dd>
            <dd>{item.word}</dd>
            <dd>{item.id}</dd>
            <dd>评论:<span>{item.pl.map((item)=><span>{item}</span>)}</span></dd>
            <dd><Button type="primary" onClick={()=>tj(ind)}>提交订单</Button></dd>
            <dd><Button type="primary" danger onClick={()=>wtj()}>未提交</Button></dd>
            <dd><Button type='primary' onClick={()=>pl(ind)}>评论</Button></dd>
        </dl>
      </div>))}
    </div>
  )
}
